<template>
  <div v-loading="ctx.loading">
    <MkBillPanel :bill="ctx.entity" ref="billPanelRef" :showBaseInfo="false">
      <template #button>
        <MkButtonQueryHistory @click="listRef.open()" />
        <MkButtonAdd @click="newEntity" :isEdit="ctx.isEdit" />
        <MkButtonSubmit @click="submit" :loading="ctx.loading" :isEdit="ctx.isEdit" />
        <MkButtonMore>
          <a-menu-item @click="cancel">作废</a-menu-item>
          <a-menu-item @click="billPanelRef.showCaoZuo()">操作记录</a-menu-item>
        </MkButtonMore>
      </template>
      <div>
        <MkPanel title="血液信息">
          <MkXueYeScanInput />
          <MkForm class="mt10">
            <el-form-item label="血液信息">
              <MkTextXueYe style="padding: 0 0 0 20px;" />
            </el-form-item>
            <el-form-item label="患者信息">
              <MkPatient />
            </el-form-item>
          </MkForm>
        </MkPanel>
        <MkPanel title="记录信息">
          <MkForm :model="ctx.entity" formId="shuXueQianHeDui" ref="shuXueQianHeDuiRef" :col="3">
            <MkDatePicker label="输血开始时间" v-model="ctx.entity.kaiShiShiJian" prop="kaiShiShiJian" :isEdit="ctx.isEdit" />
            <MkSelectUser label="核对人1" v-model="ctx.entity.heDuiRen1Id" prop="heDuiRen1Id" :isEdit="ctx.isEdit" />
            <MkSelectUser label="核对人2" v-model="ctx.entity.heDuiRen2Id" prop="heDuiRen2Id" :isEdit="ctx.isEdit" />
            <MkInputNumber label="输血前体温" v-model="ctx.entity.tiWen" prop="tiWen" :isEdit="ctx.isEdit" />
            <MkInputTwo label="血压" prop="xueYaBp1" prop2="xueYaBp2">
              <template #input1>
                <el-input v-model="ctx.entity.xueYaBp1" :disabled="!ctx.isEdit" style="width: 100%">
                  <template #suffix>
                    <span>mmHg</span>
                  </template>
                </el-input>
              </template>
              <template #input2>
                <div style="display: flex;">
                  <el-input v-model="ctx.entity.xueYaBp2" :disabled="!ctx.isEdit" style="width: 100%">
                    <template #suffix>
                      <span>mmHg</span>
                    </template>
                  </el-input>
                </div>
              </template>
            </MkInputTwo>
            <MkInputNumber label="脉搏" v-model="ctx.entity.maiBo" prop="maiBo" :isEdit="ctx.isEdit">
              <template #suffix>
                <span>次/分</span>
              </template>
            </MkInputNumber>
            <MkInputNumber label="呼吸" v-model="ctx.entity.huXi" prop="huXi" :isEdit="ctx.isEdit">
              <template #suffix>
                <span>次/分</span>
              </template>
            </MkInputNumber>
            <MkInputNumber label="滴速" v-model="ctx.entity.diSu" prop="diSu" :isEdit="ctx.isEdit">
              <template #suffix>
                <span>ml/h</span>
              </template>
            </MkInputNumber>
            <MkSelect label="输入途径" v-model="ctx.entity.shuRuTuJing" prop="shuRuTuJing" :isEdit="ctx.isEdit"
              :options="['头皮针', '留置针', '中心静脉导管']" />
            <MkSelect label="血袋外观" v-model="ctx.entity.xueDaiWaiGuang" prop="xueDaiWaiGuang" :isEdit="ctx.isEdit"
              :options="['无破损', '有破损']" />
            <MkSelect label="血袋条形码是否相符" v-model="ctx.entity.tiaoXingMaShiFouXiangFu" prop="tiaoXingMaShiFouXiangFu"
              :isEdit="ctx.isEdit" :options="['相符', '不相符']" />
          </MkForm>
        </MkPanel>
      </div>
    </MkBillPanel>
    <ListPage ref="listRef" @load='loadEntity' />
  </div>
</template>

<script lang='ts' setup>
import ListPage from './list.vue'

interface shuXueQian extends BillEntityType {
  kaiShiShiJian: string
  heDuiRen1Id: number
  heDuiRen2Id: number
  tiWen: number
  xueYaBp1: number
  xueYaBp2: number
  maiBo: number
  huXi: number
  diSu: number
  shiFouShuZhongShuXue: boolean
  xueYeId: number
  shuRuTuJing: string
  xueDaiWaiGuang: string
  tiaoXingMaShiFouXiangFu: string
}

const initState = () => {
  return {
    entity: {
      danJuLeiXing: '输血前核对',
      shiFouShuZhongShuXue: false
    } as shuXueQian,
    loading: false,
    isEdit: true
  }
}
const ctx = reactive(initState())

const listRef = ref()
const billPanelRef = ref()

const newEntity = () => {

}
const submit = () => {

}
const cancel = () => {

}
const loadEntity = () => {

}
</script>

<style lang='scss' scoped></style>